<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ include file="/common/taglibs.jsp" %>
<!DOCTYPE html>
<html>
<head>
<title>產品類別管理</title>
<%@ include file="/common/header.jsp" %>
<style type="text/css">

.tab-content input, .editable{
	float: left;
}
.tab-content .subCategory{
	padding: 5px 10px;
}
.tab-content  li{
	vertical-align: middle;
}
.tab-content h4{
	padding:0;
}
.category-buttons{
	text-align: center;
	padding-top: 5px; 
}
#main-content ul li{
	background: url("");
	padding: 4px 0;
}
.zh-category, .en-category{
	display:none;
}
.defaultForm{
	display: block;
}
input.editable-text{
	width: 80%;
}
</style>
    <!-- Page Head -->
    <div class="content-box">
          <div class="content-box-header">
	      	<h3>產品類別管理</h3>  
	      </div>
	      <!-- End .content-box-header -->
	      <div class="content-box-content">
            <p>
              <label for="languageId" >Language：</label>
              <select name="languageId"  id="languageId">
              	<c:forEach items="${language }"  var="l">
              		<option value="${l.languageId }"   data-key="${l.languageKey }" <c:if test="${l.languageKey eq defaultForm}">selected='selected'</c:if>>${l.languageName }</option>
              	</c:forEach>
              </select>
            </p>
             <!--  begin zh-category -->		
            <div class="zh-category <c:if test="${defaultForm eq 'zh'}">defaultForm</c:if>">
	      	<fieldset class="column-left">	      
			    <ul class="tab-content default-tab">
			    	<li>
			    		<input type="checkbox" class="check-all" value=""/>
			          <h4></h4>
			          <div class="clear"></div>
			         </li><li>
			          <ul	class="subCategory"></ul>
			          </li>
			    </ul>
			    <p style="text-align: center;"> 
			   <input class="button add" type="button" value="Add" />
			   <input class="button delete" type="button" value="Delete" /></p>
			    </fieldset>
			    <fieldset class="column-right">
			    <ul class="tab-content default-tab">
			          <li>
			          <input type="checkbox" class="check-all" value=""/>
			          <h4></h4>
			          <div class="clear"></div>
			          </li><li>
			          <ul	class="subCategory">
			          </ul>
			          </li>
			     </ul><p  style="text-align: center;">
			      <input class="button add" type="button" value="Add" />
			      <input class="button delete" type="button" value="Delete" /></p>
			     </fieldset>
			     <div class="clear"></div>
			     </div>
			      <!--  end zh-category -->
			     <!--  begin en-category -->			     
			     <div class="en-category <c:if test="${defaultForm eq 'en'}">defaultForm</c:if>">
		      		<fieldset class="column-left">	      
				    <ul class="tab-content default-tab">
				    	<li>
				    		<input type="checkbox" class="check-all" value=""/>
				          <h4></h4>
				          <div class="clear"></div>
				         </li><li>
				          <ul	class="subCategory"></ul>
				          </li>
				    </ul>
				    <p style="text-align: center;"> 
				   <input class="button add" type="button" value="Add" />
				   <input class="button delete" type="button" value="Delete" /></p>
				    </fieldset>
				    <fieldset class="column-right">
				    <ul class="tab-content default-tab">
				          <li>
				          <input type="checkbox" class="check-all" value=""/>
				          <h4></h4>
				          <div class="clear"></div>
				          </li><li>
				          <ul	class="subCategory">
				          </ul>
				          </li>
				     </ul><p  style="text-align: center;">
				      <input class="button add" type="button" value="Add" />
				      <input class="button delete" type="button" value="Delete" /></p>
				     </fieldset>
				     <div class="clear"></div>
			     </div>
			       <!--  end en-category -->
			     <div class="category-buttons"><p>
              			<input class="button submit" type="button" value="Submit" />
           		 	</p>
            	</div>
	      </div>
     </div>
    <!-- End .content-box -->
    <div class="clear"></div>
 <%@ include file="/common/footer.jsp" %>
  <script type="text/javascript" src="${ctx}/extends/jquery.editable-1.3.3.js?_=${radom}"></script>
  <script type="text/javascript" src="${ctx}/extends/jquery.json-2.3.js?_=${radom}"></script>
 <script type="text/javascript" src="${ctx}/js/productCategory.js?_=${radom}"></script>
  <script type="text/javascript">
 $(function(){
	 $("#main-nav a[data-menu='product']").addClass("current").click();
	 $("#main-nav a[data-menu='productCategory']").addClass("current");
		// Check all checkboxes when the one in a table head is checked:			
		$('.check-all').click(function(){
			$(this).parents("fieldset").find("input[type='checkbox']").attr('checked', $(this).is(':checked'));   
		})
 })
 </script>